<template>
  <div class="task-report">
    <div class="report-header">
      <el-radio-group v-model="dateRangeType" size="small" @change="onDateRangeChange">
        <el-radio-button label="7">近7天</el-radio-button>
        <el-radio-button label="30">本月</el-radio-button>
        <el-radio-button label="custom">自定义</el-radio-button>
      </el-radio-group>
      <el-date-picker
        v-if="dateRangeType==='custom'"
        v-model="customRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        size="small"
        style="margin-left:16px;width:240px;"
        @change="onCustomRangeChange"
      />
      <el-button size="small" style="margin-left:24px;" icon="el-icon-download">导出报表</el-button>
    </div>
    <div class="report-row">
      <div class="report-card" style="flex:2;">
        <h3>任务趋势</h3>
        <div ref="trendChart" style="height:300px;"></div>
      </div>
    </div>
    <div class="report-row">
      <div class="report-card" style="flex:1;">
        <h3>状态分布</h3>
        <div ref="statusChart" style="height:260px;"></div>
      </div>
      <div class="report-card" style="flex:1;">
        <h3>责任人任务数排行</h3>
        <el-table :data="userRankData" size="small" border style="width:100%;">
          <el-table-column prop="name" label="责任人" />
          <el-table-column prop="count" label="任务数" />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getTaskTrend, getTaskStatusPie, getAssigneeRank } from '@/api/emergency/task'
export default {
  name: 'TaskReport',
  data() {
    return {
      dateRangeType: '7',
      customRange: [],
      trendData: {
        dates: [],
        published: [],
        finished: [],
        overdue: []
      },
      statusData: [],
      userRankData: []
    }
  },
  mounted() {
    this.loadAllData();
  },
  methods: {
    loadAllData() {
      // 计算时间范围
      let startDate, endDate;
      const today = new Date();
      if (this.dateRangeType === '7') {
        endDate = this.formatDate(today);
        const start = new Date(today.getTime() - 6 * 24 * 60 * 60 * 1000);
        startDate = this.formatDate(start);
      } else if (this.dateRangeType === '30') {
        endDate = this.formatDate(today);
        const start = new Date(today.getTime() - 29 * 24 * 60 * 60 * 1000);
        startDate = this.formatDate(start);
      } else if (this.dateRangeType === 'custom' && this.customRange.length === 2) {
        startDate = this.formatDate(this.customRange[0]);
        endDate = this.formatDate(this.customRange[1]);
      }
      // 任务趋势
      getTaskTrend({ startDate, endDate }).then(res => {
        const arr = res.data || [];
        this.trendData.dates = arr.map(i => i.day);
        this.trendData.published = arr.map(i => i.publish);
        this.trendData.finished = arr.map(i => i.done);
        this.trendData.overdue = arr.map(i => i.overdue);
        this.$nextTick(() => this.renderCharts());
      });
      // 状态分布
      getTaskStatusPie().then(res => {
        this.statusData = (res.data || []).map(i => {
          let name = '未知';
          if (i.status === 0) name = '待处理';
          if (i.status === 1) name = '进行中';
          if (i.status === 2) name = '已完成';
          if (i.status === 3) name = '逾期';
          return { value: i.count, name };
        });
        this.$nextTick(() => this.renderCharts());
      });
      // 责任人排行
      getAssigneeRank().then(res => {
        this.userRankData = (res.data || []).map(i => ({ name: i.assigneeName, count: i.count }));
      });
    },
    renderCharts() {
      // 任务趋势折线图
      const trendChart = echarts.init(this.$refs.trendChart);
      trendChart.setOption({
        tooltip: { trigger: 'axis' },
        legend: { data: ['发布', '完成', '逾期'] },
        xAxis: { type: 'category', data: this.trendData.dates },
        yAxis: { type: 'value' },
        series: [
          { name: '发布', type: 'line', data: this.trendData.published },
          { name: '完成', type: 'line', data: this.trendData.finished },
          { name: '逾期', type: 'line', data: this.trendData.overdue }
        ]
      });
      // 状态分布饼图
      const statusChart = echarts.init(this.$refs.statusChart);
      statusChart.setOption({
        tooltip: { trigger: 'item' },
        legend: { bottom: 0 },
        series: [
          {
            name: '状态',
            type: 'pie',
            radius: '60%',
            data: this.statusData,
            label: { formatter: '{b}: {c} ({d}%)' }
          }
        ]
      });
    },
    onDateRangeChange() {
      this.loadAllData();
    },
    onCustomRangeChange() {
      this.loadAllData();
    },
    formatDate(date) {
      if (!date) return '';
      const d = new Date(date);
      const m = d.getMonth() + 1;
      const day = d.getDate();
      return `${m < 10 ? '0' + m : m}-${day < 10 ? '0' + day : day}`;
    }
  }
}
</script>

<style scoped>
.task-report {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 16px;
}
.report-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}
.report-row {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}
.report-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(33,147,176,0.08);
  padding: 20px 24px 24px 24px;
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
</style> 